<template>
	<view class="cont" @click="onGoDetails(item.id)">
		<view class="title">{{item.title}}</view>
		<view class="desc">
			<text class="money">￥{{item.price}}</text>
			<text class="price">市场价：￥{{item.market_price}}</text>
			<text class="btn cu-btn radius shadow bg-green">购买</text>
		</view>
		<view class="info">
			<text>已成交：{{item.sold}}张</text>
			<text>库存：{{item.stock}}张</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			onGoDetails(id) {
				uni.navigateTo({
					url: `/pages/Shops/shop/shop?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cont{
		margin: 30upx;
		margin-top: 0;
		padding: 30upx 50upx;
		background-color: #fff;
		box-shadow: 0 10upx 50upx 0 rgba(0,0,0,0.1);
		position: relative;
		overflow: hidden;
		&::before,
		&::after{
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 40upx;
			height: 40upx;
			border-radius: 40upx;
			background-color: rgba(#000, .05);
		}
		&::before{
			left: -20upx;
		}
		&::after{
			right: -20upx;
		}
		.title{
			font-size: 30upx;
			color: #000;
			line-height: 42upx;
			padding-bottom: 19upx;
			border-bottom: 1upx dashed #ccc;
		}
		.desc{
			margin: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.money{
				font-size: 36upx;
				color: #FF3401;
				line-height: 50upx;
			}
			.price{
				font-size: 26upx;
				color: #999999;
				line-height: 37upx;
			}
			.btn{
				width: 114upx;
				height: 50upx;
				border-radius: 8upx;
				padding: 0;
				font-size: 26upx;
			}
		}
		.info{
			display: flex;
			justify-content: space-between;
			font-size: 24upx;
			color: #999;
			line-height: 33upx;
		}
	}
</style>
